<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02getfinecoursetransferparam</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <style>
        .div1{
            width: 300px;
            height: 240px;
            border: 1px dotted;
            text-align: center;
            background-color: honeydew;
            border-radius: 20px;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <finecourses></finecourses>
        </div>
    </div>
    <template id="fineCoursesTpl">
        <div>
            <div>
                <button @click="getFineCourses()">获取精品课程</button>
            </div>
            <finecoursesitem v-for="fineCourse in fineCourses"
            :imgpath="fineCourse.cover"
            :title="fineCourse.name"
            :viewnum="fineCourse.viewnum"
            :buynum="fineCourse.buynum"
            :isfree="fineCourse.isfree"></finecoursesitem>
        </div>
    </template>
    <template id="fineCoursesItemTpl">
        <div class="div1">
            <div style="margin-top: 10px;">
                <img :src="imgpath" alt="" width="270px" height="150px" style="border-radius: 10px;">
            </div>
            <div style="font-size: 20px;font-weight: bold;">{{title}}</div>
            <div style="margin-top:15px;">
                <div style="float:left;margin-left: 15px;width: 140px;font-size: 12px;">{{viewnum}}人浏览|已有{{buynum}}人购买</div>
                <div style="float:right;margin-right: 15px;">
                    <button style="background-color: green;color: white;" v-if="isfree=='y'">免费</button>
                    <button style="background-color: red;color: white;" v-if="isfree=='n'">付费</button>
                    <button style="background-color: brown;color: white;">预约课程</button>
                </div>
            </div>
        </div>
    </template>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            /*组件名称应全小写，搭脚手架之后可以使用大写字母*/
            'finecourses':{
                template:'#fineCoursesTpl',
                data:function(){
                    return{
                        //isfine:'y',//第4种、第5种方式时使用该参数
                        url:"http://localhost/course/getFineCourse",//第4种、第5种方式时屏蔽
                        fineCourses:[]
                    }
                },
                methods:{
                    getFineCourses(){
                        /*//第1种方式：了解，不推荐
                        axios.get(this.url+"?isfine=y").then(res=>{
                            this.fineCourses=res.data.data.fineCourses;
                        });*/
                        /*//第2种方式：仅适用于get请求的简写形式
                        axios.get(this.url,{
                            params:{
                                isfine:'y'
                            }
                        }).then(res=>{
                            this.fineCourses=res.data.data.fineCourses;
                        });*/
                        //第3种方式：get请求的标准写法
                        axios({
                            type:'get',
                            url:this.url,
                            params:{
                                isfine:'y'
                            }
                        }).then(res=>{
                            this.fineCourses=res.data.data.fineCourses;
                        });
                        /*//第4种方式:更改服务器路径中传值
                        var myurl=`http://localhost/course/getFineCourseFourth/${this.isfine}`;
                        axios({
                            type:'get',
                            url:myurl
                        }).then(res=>{
                            this.fineCourses=res.data.data.fineCourses;
                        });*/
                        /*//第5种方式:更改服务器路径拼接传值
                        var myurl='http://localhost/course/getFineCourseFourth';
                        axios({
                            type:'get',
                            url:myurl+"/"+this.isfine
                        }).then(res=>{
                            this.fineCourses=res.data.data.fineCourses;
                        });*/
                    }
                },
                components:{
                    'finecoursesitem':{
                        template:'#fineCoursesItemTpl',
                        /*访问前端图片的路径：前端页面的上一级目录与images目录同级时：../images/model2.jpg，
                        访问后端图片路径：http://localhost/images/courses/model2.jpg
                        */
                        props:['imgpath','title','viewnum','buynum','isfree']
                    }
                }
            }
        }
    });
</script>